<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Guiyn-mark01-wifimanger</title>
<style type='text/css'>
input, select {
	align:center;
	width : 14em;
	height : 3.2em;
	padding : 0.2em 0.4em 0.2em 0.4em;
	vertical-align : middle;
	border : 1px solid #94c1e7;
	-moz-border-radius : 0.2em;
	-webkit-border-radius : 0.2em;
	border-radius : 0.2em;
	-webkit-appearance : none;
	-moz-appearance : none;
	appearance : none;
	background : #ffffff;
	font-family : SimHei;
	font-size : 1.1em;
	color : RGBA(102, 102, 102, 0.7);
	cursor : pointer;
}
button {
	width:100%;
	border: 2px solid #94c1e7;
	background-color: #94c1e7;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 4px 2px;
	cursor: pointer;
	box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
table {
	width:80%;
}
body {
	text-align:center
}
.div {
	margin:0 auto;
	width:80%;
}
.ltd {
	text-align:right;
}
</style>
</head>
<script>
	
function pageinit(){
	document.getElementById('sids_result').style.display='none';    
	document.getElementById('sys_setting').style.display='none';    
	document.getElementById('get_sids').style.display='';    
	
	
}
	
function showWifiSetting(){
	document.getElementById('sids_result').style.display='';    
	document.getElementById('get_sids').style.display='none';    
	document.getElementById('sys_setting').style.display='none';  
}
	
function showSysSetting()
{
	document.getElementById('sys_setting').style.display='';  
	document.getElementById('sids_result').style.display='none';    
	document.getElementById('get_sids').style.display='none';
	document.getElementById('weather_node_result').style.display='none';
	
}	
	
function getsids(){ 
 
	var xmlHttp = new XMLHttpRequest(); 
	xmlHttp.open('get','/wifi_ssids'); 
	xmlHttp.send();
	xmlHttp.onreadystatechange = function() 
	{ 
 
		if (xmlHttp.readyState == 4 && 	xmlHttp.status == 200) 
		{
			var data = xmlHttp.responseText;
 		 	var jdata = JSON.parse(data);
			var signFrame = document.getElementById('sid_select');     
     		for(var i=0;i<jdata.length;i++)
			{ 
				var opt = document.createElement('option');
				opt.value =jdata[i];
				opt.text = jdata[i];
				signFrame.appendChild(opt);
     		}
	    	
			 showWifiSetting();
		}
	}
}
        
        
        
function connsid( ){ 
	var myselect=document.getElementById('sid_select');
 	var sindex=myselect.selectedIndex ;
 	var sid=myselect.options[sindex].text;
	
	var tin=document.getElementById('sid_pass');
 	var tok=tin.value;
 	
 	var wloc=document.getElementById('w_loc').value;
 	var wkey=document.getElementById('w_key').value;
 	
	var d = new FormData(); 
	d.append('act', 'conn'); 
	d.append('sid' , sid);
	d.append('pass' , tok);
	d.append('w_loc' , wloc);
	d.append('w_key' , wkey);
	var xmlHttp 	= new XMLHttpRequest(); 
	xmlHttp.open('post','/wifi_setting'); 
	xmlHttp.send(d) ; 
	xmlHttp.onreadystatechange = function() 
	{ 
		if (xmlHttp.readyState == 4 && 	xmlHttp.status == 200) 
		{
			var d = xmlHttp.responseText;
			pageinit();
	 		alert(d);

		}
	}
}
      
function getStatus(){ 
	 
	var xmlHttp 	= new XMLHttpRequest(); 
	xmlHttp.open('get','/status'); 
	xmlHttp.send() ; 
	xmlHttp.onreadystatechange = function() 
	{ 
		if (xmlHttp.readyState == 4 && 	xmlHttp.status == 200) 
		{
			var d = xmlHttp.responseText;
	 		 alert(d);
		}
	}
}
 
function query_weather_node(){
	
//		document.getElementById('weather_node_result').style.display='';    
 	var query_info=document.getElementById('weather_node_query');
 	var query=query_info.value;
	var d = new FormData(); 
	d.append('query', query); 
 
	var xmlHttp  = new XMLHttpRequest(); 
	xmlHttp.open('post','/weather_node_query'); 
	xmlHttp.send(d) ; 
	xmlHttp.onreadystatechange = function() 
	{ 
		if (xmlHttp.readyState == 4 && 	xmlHttp.status == 200) 
		{
		 
			 var data = xmlHttp.responseText;
 		 	var jdata = JSON.parse(data);
			var nodeselect = document.getElementById('weather_node_select');     
     		for(var i=0;i<jdata.length;i++)
			{ 
				var opt = document.createElement('option');
				opt.value =jdata[i].value;
				opt.text = jdata[i].node;
				nodeselect.appendChild(opt);
     		}
	   	document.getElementById('weather_node_result').style.display='';    

		}
	}
}          
 
 
 
	</script>
<body>
<div id='get_sids' class='div' >
  <button  type='button' onclick ='getsids()'>WiFi&#x8FDE;&#x63A5;&#x8BBE;&#x7F6E;</button>
  <br>
  <!--<button  type='button' onclick ='showSysSetting()'>&#x5929;&#x6C14;&#x4E0E;&#x65F6;&#x949F;&#x8BBE;&#x7F6E;</button>-->
  <br>
  <button  type='button' onclick ='getStatus()'>&#x5F53;&#x524D;&#x8BBE;&#x7F6E;&#x8BE6;&#x60C5;</button>
</div>
<div id='sids_result' style='display:none'>
  <table align='center'>
    <tr>
      <td><label> SID </label></td>
      <td><select id='sid_select' style= 'width:80%' >
        </select></td>
    </tr>
    <tr>
      <td><label>&#x5BC6;&#x7801;</label></td>
      <td><input id='sid_pass' style= 'width:80%' ></td>
    </tr>
    
     <tr>
      <td><label>&#x4F4D;&#x7F6E;</label></td>
      <td><input id='w_loc' style= 'width:80%' /></td>
    </tr>
    
      <tr>
        <td><label>KEY</label></td>
        <td><input id='w_key' style= 'width:80%' /></td>
      </tr>

    <tr>
      <td colspan='2'><button  type='button' onclick ='connsid()'>&#x8FDE;&#x63A5;</button></td>
    </tr>
  </table>
</div>
 
</body>
</html>